<template>
    <com-el-dialog-ex title="编辑样例"
                      v-model:visible="visible"
                      @open="resetForm"
                      @confirm="submitForm"
                      @cancel="closed">
        <el-form ref="ruleFormRef"
                 label-width="auto"
                 size="default"
                 :model="ruleForm"
                 :rules="rules">
            <el-form-item label="文本框：" prop="input">
                <el-input v-model="ruleForm.input"
                          placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="确认内容：" prop="confirmInput">
                <el-input v-model="ruleForm.confirmInput"
                          placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="文本域：" prop="textarea">
                <el-input v-model="ruleForm.textarea"
                          type="textarea"
                          :rows="4"
                          placeholder="请输入内容"/>
            </el-form-item>
            <el-form-item label="数字框：" prop="number">
                <el-input-number v-model="ruleForm.number"
                                 placeholder="请输入数字"
                                 controls-position="right"/>
            </el-form-item>
            <el-form-item label="下拉框：" prop="comboBox">
                <el-select placeholder="请选择"
                           clearable
                           v-model="ruleForm.comboBox">
                    <el-option v-for="item in options"
                               :key="item.value"
                               :label="item.label"
                               :value="item.value"/>
                </el-select>
            </el-form-item>
            <el-form-item label="级联选择：" prop="cascader">
                <el-cascader v-model="ruleForm.cascader"
                             style="width: 100%"
                             placeholder="请选择"
                             :options="cascaderOptions"/>
            </el-form-item>
            <el-form-item label="单选框：" prop="radio">
                <el-radio-group v-model="ruleForm.radio">
                    <el-radio value="0">选项01</el-radio>
                    <el-radio value="1">选项02</el-radio>
                    <el-radio value="2">选项03</el-radio>
                </el-radio-group>
                <el-radio-group v-model="ruleForm.radio">
                    <el-radio-button value="0">选项01</el-radio-button>
                    <el-radio-button value="1">选项02</el-radio-button>
                    <el-radio-button value="2">选项03</el-radio-button>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="复选框：" prop="checkBox">
                <el-radio-group v-model="ruleForm.checkBox">
                    <el-checkbox value="0">选项01</el-checkbox>
                    <el-checkbox value="1">选项02</el-checkbox>
                    <el-checkbox value="2">选项03</el-checkbox>
                    <el-checkbox value="3">选项04</el-checkbox>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="开关：" prop="switch">
                <el-switch v-model="ruleForm.switch"/>
            </el-form-item>
            <el-form-item label="日期：" prop="date">
                <el-date-picker type="date"
                                placeholder="选择日期"
                                v-model="ruleForm.date"/>
            </el-form-item>
            <el-form-item label="时间：" prop="dateTime">
                <el-date-picker type="datetime"
                                placeholder="选择时间"
                                v-model="ruleForm.dateTime"/>
            </el-form-item>
        </el-form>
    </com-el-dialog-ex>
</template>

<script setup lang="ts">
    import { getCurrentInstance } from "vue";
    import type { FormInstance, FormRules } from 'element-plus'
    import { defaultDemoForm, type DemoForm, demoFormRule } from "@/common/model/demo/demoForm";
    import ComElDialogEx from "@/components/com-el-dialog-ex/com-el-dialog-ex.vue";

    defineOptions({
        name: 'view-demo-edit'
    })

    //region # 属性

    // 应用实例
    const { proxy }:any = getCurrentInstance()

    // 显示状态
    const visible = defineModel("visible", {
        type: Boolean,
        required: true,
        default: false
    })

    // 表单
    const ruleFormRef = ref<FormInstance>()

    // 验证表单
    let ruleForm = reactive<DemoForm>(defaultDemoForm)

    // 验证规则
    const rules = reactive<FormRules<DemoForm>>(demoFormRule)

    // 选项列表
    const options = [
        {
            value: 'Item01',
            label: '选项01',
        },
        {
            value: 'Item02',
            label: '选项02',
        }
    ]

    // 级联选项列表
    const cascaderOptions = [
        {
            value: 'level01',
            label: '层级01',
            children: [
                {
                    value: 'level0101',
                    label: '层级01-01',
                    children: [
                        {
                            value: 'level010101',
                            label: '层级01-01-01',
                        },
                        {
                            value: 'level010102',
                            label: '层级01-01-02',
                        }
                    ],
                },
                {
                    value: 'level0201',
                    label: '层级01-02',
                    children: [
                        {
                            value: 'level010201',
                            label: '层级01-02-01',
                        },
                        {
                            value: 'level010202',
                            label: '层级01-02-02',
                        }
                    ],
                }
            ]
        },
        {
            value: 'level02',
            label: '层级02',
            children: [
                {
                    value: 'level0201',
                    label: '层级02-01',
                    children: [
                        {
                            value: 'level020101',
                            label: '层级02-01-01',
                        },
                        {
                            value: 'level020102',
                            label: '层级02-01-02',
                        }
                    ],
                },
                {
                    value: 'level0201',
                    label: '层级02-02',
                    children: [
                        {
                            value: 'level020201',
                            label: '层级02-02-01',
                        },
                        {
                            value: 'level020202',
                            label: '层级02-02-02',
                        }
                    ],
                }
            ]
        }
    ]

    // 组件事件列表
    const emits = defineEmits([ 'closed' ])

    //endregion

    //region # Hooks

    //endregion

    //region # 方法

    // Action

    /**
     * 提交
     * */
    const submitForm = async () => {
        console.log(proxy)
        proxy.$api.demo.postDemo("","");

        if (!ruleFormRef.value) return
        await ruleFormRef.value.validate((valid, fields) => {

            if (valid) {


                // TODO 提交
                proxy.$service.toast.success('表单验证通过！')

                tryClose(true);
            }
            else {
                // TODO 验证未通过
                proxy.$service.toast.error('表单验证未通过！')
            }
        })
    }

    /**
     * 重置表单
     * */
    const resetForm = () => {
        if (!ruleFormRef.value) return

        ruleForm = Object.assign(ruleForm, defaultDemoForm)
        ruleFormRef.value.resetFields()
    }

    /**
     * 重置表单
     * */
    const closed = () => {
        tryClose(false);
    }

    /**
     * 尝试关闭
     * @param result - 结果
     * */
    const tryClose = (result:boolean) => {

        visible.value = false
        emits('closed', result);
    }

    //endregion

    //region # 事件

    /**
     * 加载完毕
     * */
    onMounted(async () => {

    })
    //endregion

</script>

<style scoped>
    @import "DemoEditView.less";
</style>